<template>
  <div id="app">
    <visual-editor v-model="jsonData" :config="config" :formData="formData" :customProps="customProps">
      <!-- 给一个按钮添加组件标识myBtn，给一个下拉框绑定字段为food -->
      <template #myBtn>
        <el-button v-if="formData.food === 'dangao'">自定义按钮</el-button>
        <el-tag v-else>自定义标签</el-tag>
      </template>
    </visual-editor>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import VisualEditor from "./packages/Index";
import { VisualConfig } from "./packages/layout/visual-editor-menu/VisualEditorConfig";

export default defineComponent({
  name: "App",
  components: {
    VisualEditor
  },
  data() {
    return {
      // 展示数据
      jsonData: {
        container: {
          width: 1000,
          height: 1000
        },
        blocks: []
      },
      // 配置数据
      config: VisualConfig,
      // 绑定的数据
      formData: {},
      // 自定义属性
      customProps: {
        myBtn: { // myBtn是组件标识，即slotName
          onClick: () => {
            this.$notify({ message: "执行表单数据校验以及添加到服务器的动作" });
          }
        },
        mySelect: {
          onChange: (val: any) => {
            this.$notify({ message: `下拉框发生变化，${val}` });
          }
        }
      }
    };
  }
});
</script>

<style lang="scss">
#app {
  @include wh100;
}
</style>
